<template>
	<view class="setPayPw2">
		<view class="text-center mb30">{{tipsText}}</view>
		<view @tap="showKB">
			<tui-keyboard-input :inputvalue="valArr"></tui-keyboard-input>
		</view>
		<view class="tip text-center text-sm">不要是登录密码或连续相同数字</view>
		
		<tui-keyboard :show="keyboardShow" :radius="true" @click="keyboardClick" @complete="handelComplete" @close="handalClose">
			<view class="tui-digital-box">
				<view class="tui-keyboard-tips">请输入密码</view>
			</view>
		</tui-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyboardShow:false,
				valArr :['', '', '', '', '', ''],
				payPw:'',                           //第一次密码
				rePayPw:'',                         //再次密码
				phone:'',                           //手机号
				code:'',                            //验证码
				tipsText: '请输入支付密码，用于支付'   //提示语
			}
		},
		onLoad(e){
			this.phone = e.phone;
			this.code = e.code
		},
		methods:{
			//展示出键盘
			showKB(){
				this.keyboardShow = true
			},
			// 监听键盘数字输入
			keyboardClick(e) {
				this.valArr = e;  //实时判断输入了多少数字
			},
			//关闭键盘
			handalClose() {
				this.keyboardShow = false;
				this.valArr = ['', '', '', '', '', '']  //清空此时已经输入的内容
			},
			// 监听键盘完成指定长度数字输入
			handelComplete(e) {
				if(!this.payPw){
					this.payPw = e.join('');  //拼接成无间隔的字符串
					this.tipsText = '请再次输入，以确认密码';  //更改提示内容

				}else{
					this.rePayPw = e.join('');
					//  两次密码不一致
					if(this.payPw !== this.rePayPw){
						this.$tip.toast('两次输入密码不一致,请重新输入');
						this.handalClose();
						this.payPw = '';
						this.rePayPw = '';
						this.tipsText = '请输入支付密码，用于支付'
					}else{
						// 发送请求
						this.request()
					}
				}
			},
			// 发送请求
			request(){
				// 请求
				this.$http.post('/api/auth/business/pwd/setPayPwd',{account: this.phone, payPwd: this.payPw,phone: this.phone,code: this.code,type: 2}).then(res => {
					let userInfo = this.$store.state.userInfo;
					userInfo.payPwd = 2;
					this.$store.commit('getUserInfo',userInfo);
					uni.showToast({
					    title: '设置成功',
					    duration: 1000,
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateBack({delta:1})
					},1000)
				})
			},
		}
	}
</script>

<style>
page {
	background-color: #fff;
}
</style>
<style scoped lang="scss">
.setPayPw2 {
	font-size: 30rpx;
	padding: 60rpx 28rpx 0;
}
.mb30 {
	margin-bottom: 30rpx;
}
.tip {
	margin: 20rpx 0 60rpx;
}
.tui-keyboard-tips {
	width: 100%;
	height: 120rpx;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	background: #fff;
	position: relative;
	color: #333;
	border: 0;
}
//修改成功弹出框
 .finish-modal{
	 .icon{
		position: absolute;
		right: 60rpx;
		top: 40rpx;
	 }
 }
.feedback-finish {
	padding-top: 60rpx;
	font-size: 30rpx;
}
image {
	width: 130rpx;
	height: 130rpx;
	margin-bottom: 30rpx;
}
.thanks {
	margin-bottom: 98rpx;
}
</style>
